<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="forum.css">
    <!-- integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" -->
    <title>论坛首页</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<div class="headerFixedBar">
    <div class="row">
        <div class="text-left" style="margin-top: 5px;">
            <a class="headerText" href="forum.html">ForumSample</a>
        </div>
    </div>
</div>

<body>
    <div class="container">
        <div class="row">
            <div class="col-log-12 forumModule pgBar forumMargin">
                <i class="material-icons md-36 signp">home</i> <a href="#">Home</a>
                <i class="material-icons md-36 signp">category</i> <a href="#">Category</a>
                <i class="material-icons md-36 signp">style</i> <a href="#">Discussion</a>
            </div>
        </div>

        <div id="category_1" class="row forumModule">
            <a href="#" onclick="showDiscussions(1);">
                <div class="col-lg-12 columnPad">
                    <div class="pullLeft">
                        <h1>Java后端开发学习论坛</h1><h4>(点击展开)</h4>
                    </div>
                    <div class="pullRight">
                        <a id="startDiscussionButton_1" href="#" class="btn btn.primary themeButton"
                            onclick="startDiscussion(1);">Start Discussion</a>
                    </div>
                </div>
            </a>
        </div>

        <div id="cat_new_discussion_1" class="row forumPad" style="display: none;">
            <div class="col-lg-12">
                <form>
                    <div class="form-group">
                        Title
                        <input type="text" name="newDiscussionTitle" class="form-control" size="40">
                        <br>
                        Content
                        <textarea name="newDisscussionText" class="newDisscussionText" rows="10"></textarea>
                    </div>
                    <br>
                    <button>submit</button>
                </form>
            </div>
        </div>

        <div id="cat_discussions_1" class="row forumPad" style="display: none;">
            <table class="forumTable">
                <thead>
                    <th>
                        Discussion
                    </th>
                    <th>
                        Author
                    </th>
                    <th class="pullRight">
                        Replies
                    </th>
                </thead>

                <tr class="forumModule">
                    <td>
                        <a href="">Discussion name here</a>
                    </td>
                    <td>
                        <a href="">Author name here</a>
                    </td>
                    <td class="pullRight">
                        <a href="">34</a>
                    </td>
                </tr>

                <tr class="forumModule">
                    <td>
                        <a href="">Discussion1</a>
                    </td>
                    <td>
                        <a href="">Author1</a>
                    </td>
                    <td class="pullRight">
                        <a href="">89</a>
                    </td>
                </tr>

            </table>
            <div class="row">
                <div class="col-lg-12">
                    <div class="pullRight" style="padding-right: 5px;">
                        <a href="#" class="label label primary">view more</a>
                    </div>
                </div>
            </div>

        </div>

        <div id="category_2" class="row forumModule forumMargin">
            <a href="#" onclick="showDiscussions(2);">
                <div class="col-lg-12 columnPad">
                    <div class="pullLeft">
                        <h1>前端开发学习论坛</h1>
                    </div>
                    <div class="pullRight">
                        <a id="startDiscussionButton_2" href="#" class="btn btn.primary themeButton"
                            onclick="startDiscussion(2);">Start Discussion</a>
                    </div>
                </div>
            </a>
        </div>
        <div id="cat_new_discussion_2" class="row forumPad" style="display: none;">
            <div class="col-lg-12">
                <form>
                    <div class="form-group">
                        Title
                        <input type="text" name="newDiscussionTitle" class="form-control" size="40">
                        <br>
                        Content
                        <textarea name="newDisscussionText" class="newDisscussionText" rows="10"></textarea>
                    </div>
                    <br>
                    <button>submit</button>
                </form>
            </div>
        </div>

        <div id="cat_discussions_2" class="row forumPad" style="display: none;">
            <table class="forumTable">
                <thead>
                    <th>
                        Discussion
                    </th>
                    <th>
                        Author
                    </th>
                    <th class="pullRight">
                        Replies
                    </th>
                </thead>

                <tr class="forumModule">
                    <td>
                        <a href="">Discussion2</a>
                    </td>
                    <td>
                        <a href="">Author2</a>
                    </td>
                    <td class="pullRight">
                        <a href="">56</a>
                    </td>
                </tr>
                </table>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="pullRight" style="padding-right: 5px;">
                            <a href="#" class="label label primary">view more</a>
                        </div>
                    </div>
                </div>
        </div>


        <div id="category_3" class="row forumModule">
            <a href="#" onclick="showDiscussions(3);">
                <div class="col-lg-12 columnPad">
                    <div class="pullLeft">
                        <h1>游戏开发学习论坛</h1>
                    </div>
                    <div class="pullRight">
                        <a id="startDiscussionButton_3" href="#" class="btn btn.primary themeButton"
                            onclick="startDiscussion(3);">Start Discussion</a>
                    </div>
                </div>
            </a>
        </div>
        <div id="cat_new_discussion_3" class="row forumPad" style="display: none;">
            <div class="col-lg-12">
                <form>
                    <div class="form-group">
                        Title
                        <input type="text" name="newDiscussionTitle" class="form-control" size="40">
                        <br>
                        Content
                        <textarea name="newDisscussionText" class="newDisscussionText" rows="10"></textarea>
                    </div>
                    <br>
                    <button>submit</button>
                </form>
            </div>
        </div>
        
        <div id="cat_discussions_3" class="row forumPad" style="display: none;">
            <table class="forumTable">
                <thead>
                    <th>
                        Discussion
                    </th>
                    <th>
                        Author
                    </th>
                    <th class="pullRight">
                        Replies
                    </th>
                </thead>
        
                <tr class="forumModule">
                    <td>
                        <a href="">Discussion3</a>
                    </td>
                    <td>
                        <a href="">Author3</a>
                    </td>
                    <td class="pullRight">
                        <a href="">12</a>
                    </td>
                </tr>
            </table>
            <div class="row">
                <div class="col-lg-12">
                    <div class="pullRight" style="padding-right: 5px;">
                        <a href="#" class="label label primary">view more</a>
                    </div>
                </div>
            </div>
        </div>

        <div id="category_4" class="row forumModule">
            <a href="#" onclick="showDiscussions(4);">
                <div class="col-lg-12 columnPad">
                    <div class="pullLeft">
                        <h1>人工智能学习论坛</h1>
                    </div>
                    <div class="pullRight">
                        <a id="startDiscussionButton_4" href="#" class="btn btn.primary themeButton"
                            onclick="startDiscussion(4);">Start Discussion</a>
                    </div>
                </div>
            </a>
        </div>
        <div id="cat_new_discussion_4" class="row forumPad" style="display: none;">
            <div class="col-lg-12">
                <form>
                    <div class="form-group">
                        Title
                        <input type="text" name="newDiscussionTitle" class="form-control" size="40">
                        <br>
                        Content
                        <textarea name="newDisscussionText" class="newDisscussionText" rows="10"></textarea>
                    </div>
                    <br>
                    <button>submit</button>
                </form>
            </div>
        </div>
        
        <div id="cat_discussions_4" class="row forumPad" style="display: none;">
            <table class="forumTable">
                <thead>
                    <th>
                        Discussion
                    </th>
                    <th>
                        Author
                    </th>
                    <th class="pullRight">
                        Replies
                    </th>
                </thead>
        
                <tr class="forumModule">
                    <td>
                        <a href="">Discussion4</a>
                    </td>
                    <td>
                        <a href="">Author4</a>
                    </td>
                    <td class="pullRight">
                        <a href="">54</a>
                    </td>
                </tr>
            </table>
            <div class="row">
                <div class="col-lg-12">
                    <div class="pullRight" style="padding-right: 5px;">
                        <a href="#" class="label label primary">view more</a>
                    </div>
                </div>
            </div>
        </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="forum_home.js" type="text/javascript"></script>

</html>